<script setup lang="ts">
import { useDark, useECharts } from "@pureadmin/utils";
import { type PropType, ref, computed, watch, nextTick } from "vue";

const props = defineProps({
  requireData: {
    type: Object,
    default: () => {}
  },
});
let seriesData = []
let arrType = []


const { isDark } = useDark();

const theme = computed(() => (isDark.value ? "dark" : "light"));

const chartRef = ref();
const { setOptions } = useECharts(chartRef, {
  theme
});

watch(
  () => props,
  async () => {
    seriesData = [];
    arrType = [];
    for (let item of props.requireData?.taskTypeAvgHours ?? []) {
      if(item) {
        arrType.push(item.taskTypeName)
        seriesData.push({
          overdueTasks: item.overdueTasks,
          avgHours: item.avgHours,
          value: item.overdueTasks
        })
      }
    }
    await nextTick(); // 确保DOM更新完成后再执行
    setOptions({
      container: ".bar-card",
      color: ["#41b6ff", "#e85f33"],
      tooltip: {
        // trigger: "axis",
        // axisPointer: {
        //   type: "none"
        // },
        trigger: 'axis',
        formatter: function (params) {
          return [
              '' + params[0].name,
              '逾期数量: ' + params[0].data?.overdueTasks ?? 0,
              '平均时长(H): ' + params[0].data?.avgHours ?? 0,
          ].join('<br/>');
        }
      },
      grid: {
        top: "20px",
        left: "50px",
        right: 0
      },
      legend: {
        data: ["逾期数量"],
        textStyle: {
          color: "#606266",
          fontSize: "0.875rem"
        },
        bottom: 0
      },
      xAxis: [
        {
          type: "category",
          data: arrType,
          axisLabel: {
            fontSize: "0.875rem"
          },
          axisPointer: {
            type: "shadow"
          }
        }
      ],
      yAxis: [
        {
          type: "value",
          axisLabel: {
            fontSize: "0.875rem"
          },
          splitLine: {
            show: false // 去网格线
          }
        }
      ],
      series: [
        {
          name: "平均时长(H)",
          type: "bar",
          barWidth: 10,
          itemStyle: {
            color: "#e86033ce",
            borderRadius: [10, 10, 0, 0]
          },
          data: seriesData
        }
      ]
    });
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 365px" />
</template>
